<script setup lang="ts">
import { ref, onMounted } from "vue";
import router from "@/router";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRoute } from "vue-router";
import { getDictList } from "@/api/dict";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";
import { getRelateOrderDetail } from "@/api/relateOrder";
import { useMessage } from "@/hooks/useMessage";
import { inboundTypeNeedRelateOrderCodeList } from "@/utils/staticData";

const systemStore = useSystemStoreWithOut();
const { warehouseList } = storeToRefs(systemStore);
const { createConfirm } = useMessage();
const multiTagsStore = useMultiTagsStoreHook();
const route = useRoute();
const emits = defineEmits(["setTableData"]);
const props = defineProps({
  rows: {
    type: Number,
    default: 0
  },
});

const form = ref({
  inboundType: "", // 入库类型
  relateOrderCode: "", // 单据编号
  warehouseCode: "", // 入库仓库名称
  memo: "", // 备注
  inboundCode: "" // 入库单编号
});

const inboundTypeList = ref([]);
const formRef = ref(null);

const rules = ref({
  inboundType: [
    { required: true, message: "请选择入库类型", trigger: "change" }
  ],
  relateOrderCode: [
    {
      required: false,
      validator: (rule, value, callback) => {
        if (
          inboundTypeNeedRelateOrderCodeList.includes(form.value.inboundType) &&
          !value
        ) {
          callback(new Error("关联单据号不允许为空"));
        } else {
          callback();
        }
      },
      message: "关联单据号不允许为空",
      trigger: "blur"
    }
  ],
  warehouseCode: [
    { required: true, message: "请输入关联单据编号", trigger: "blur" }
  ]
});

const goBack = () => {
  multiTagsStore.handleTags("splice", route.path);
  router.back();
};

// 从关联单据导入物料
const linkOrderMaterial = () => {
  if (props.rows) {
    createConfirm({
      message: "请确认是否重新导入物料覆盖现有物料明细列表中的内容？",
      center: false
    }).then(() => {
      getMaterialLinkOrder();
    });
  } else {
    getMaterialLinkOrder();
  }
};

const getMaterialLinkOrder = () => {
  getRelateOrderDetail({
    relateOrderCode: form.value.relateOrderCode,
    boundType: form.value.inboundType,
    warehouseCode: form.value.warehouseCode
  }).then((res: any) => {
    emits(
      "setTableData",
      res.data.map(val => {
        return {
          ...val,
          num: 0,
          overReceiveNum: 0,
          overReceiveWarehouseCode: ""
        };
      })
    );
  });
}

const resetForm = () => {
  form.value = {
    inboundType: "", // 入库类型
    relateOrderCode: "", // 单据编号
    warehouseCode: "", // 入库仓库名称
    memo: "", // 备注
    inboundCode: "" // 入库单编号
  };
};

/**
 * 设置表单
 * @param opt 表单对象
 */
const setForm = (opt: any) => {
  form.value = Object.assign({}, form.value, opt);
};

const getInboundTypeList = () => {
  getDictList({ dictCode: "INBOUND_TYPE_M" }).then((res: any) => {
    inboundTypeList.value = res.data || [];
  });
};

onMounted(() => {
  getInboundTypeList();
});

/**
 * 表单验证
 */
const validateForm = (callback: () => void) => {
  formRef.value.validate(valid => {
    if (valid) {
      callback && callback();
    }
  });
};

defineExpose({
  getForm: () => form.value,
  resetForm,
  setForm,
  validateForm
});
</script>

<template>
  <div class="applyForm">
    <div class="flex items-center justify-between flex-row pb-[16px]">
      <p class="text-[16px] font-bold">入库管理信息</p>
      <el-button @click="goBack"
        ><svg-icon name="rollback" size="16" /> 返回</el-button
      >
    </div>
    <el-form
      ref="formRef"
      class="pr-[30px] mb-[-16px]"
      :model="form"
      inline
      :rules="rules"
    >
      <div>
        <el-form-item label="入库类型" prop="inboundType">
          <el-select v-model="form.inboundType" filterable placeholder="请输入" clearable>
            <el-option
              v-for="item in inboundTypeList"
              :key="item.dictLabelValue"
              :label="item.dictLabelName"
              :value="item.dictLabelValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库关联单据编号" prop="relateOrderCode">
          <el-input
            v-model="form.relateOrderCode"
            class="mr-[8px]"
            placeholder="请输入内容"
          />
          <el-button
            v-if="!!form.relateOrderCode"
            type="primary"
            link
            @click="linkOrderMaterial"
            >从关联单据导入物料</el-button
          >
        </el-form-item>
      </div>
      <el-form-item label="入库仓库名称" prop="warehouseCode">
        <el-select v-model="form.warehouseCode" filterable placeholder="请输入" clearable>
          <el-option
            v-for="(item, index) in warehouseList"
            :key="index"
            :value="item.warehouseCode"
            :label="item.warehouseName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入库单编号" prop="inboundCode">
        <el-input
          v-model="form.inboundCode"
          disabled
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input
          v-model="form.memo"
          type="textarea"
          maxlength="500"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped lang="scss">
.applyForm {
  overflow: hidden;
  .el-textarea {
    --el-textarea-height: 32px;
  }
}
</style>
